<template>
  <div>
    <div class="theme-title">
      <!-- <img
        src="https://file.supore.cn/1752719870supore.png"
        alt=""
        class="img"
      /> -->
      <span class="hover:cursor-pointer" @dblclick="handleLogout">
        {{ userStore.themeTitle || "" }}
      </span>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useUserStore } from "@/pinia";

onMounted(() => {});

const userStore = useUserStore();

const handleLogout = () => {
  ElMessageBox.confirm("您确定要退出登录吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    userStore.logout();
  });
};
</script>

<style scoped lang="scss">
.theme-title {
  @apply text-[1.5rem] flex justify-center items-center text-[var(--theme-color)];
  .img {
    @apply w-[6rem] h-full;
  }
}
</style>